/*
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/


/* reset */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* start editing from here */

a {
    text-decoration: none;
}

.txt-rt {
    text-align: right;
}


/* text align right */

.txt-lt {
    text-align: left;
}


/* text align left */

.txt-center {
    text-align: center;
}


/* text align center */

.float-rt {
    float: right;
}


/* float right */

.float-lt {
    float: left;
}


/* float left */

.clear {
    clear: both;
}


/* clear float */

.pos-relative {
    position: relative;
}


/* Position Relative */

.pos-absolute {
    position: absolute;
}


/* Position Absolute */

.vertical-base {
    vertical-align: baseline;
}


/* vertical align baseline */

.vertical-top {
    vertical-align: top;
}


/* vertical align top */

.underline {
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    margin: 0 0 20px 0;
}


/* Add 5px bottom padding and a underline */

nav.vertical ul li {
    display: block;
}


/* vertical menu */

nav.horizontal ul li {
    display: inline-block;
}


/* horizontal menu */

img {
    max-width: 100%;
}


/*end reset*/

body {
    background: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 100%;
}

.wrap {
    margin: 0 auto;
    width: 80%;
}


/*****/

.content {
    background: url(../images/slider.jpg) no-repeat;
    background-size: 100%;
    background-size: cover;
}


/*------- Skills rings-------*/

.heading {
    color: #1c93e2;
    border-bottom: 3.5px solid #E1E1E1;
    width: 130px;
    margin: 0 auto;
    font-size: 2.1em;
    text-transform: uppercase;
    text-shadow: 0px 0px 1px #292929;
    text-align: center;
    padding-bottom: 10px;
}

.para {
    color: #973333;
    padding: 3em 0em 4em 0em;
    text-align: center;
}

.centertxt {
    width: 85%;
    margin: 0 auto;
}

.text-light {
    background: #F5F5F5;
    padding: 3em 0em;
}

.chart {
    position: relative;
    display: inline-block;
    margin: 1em;
    width: 230px;
    height: 230px;
    text-align: center;
}

.chart canvas {
    width: 230px;
    height: 230px;
}

.chart-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.percent,
.count-number,
.count-number-done {
    color: #666;
    font-weight: 700;
    font-size: 2.333em;
    line-height: 1.34;
}

.text-light .percent,
.text-light .count-number,
.text-light .count-number-done {
    color: #656565;
}

.percent:after {
    content: '%';
}

.chart-title,
.count-subject {
    font-weight: 700;
    font-size: 0.889em;
}

.chart-title {
    color: #999;
}

.text-light .chart-title,
.text-light .count-subject {
    color: #656565;
}

.text-light .timeline .experience-info p {
    color: rgba(255, 255, 255, 0.7);
}

.text-light .timeline time {
    color: rgba(255, 255, 255, 0.5);
}

.text-light .timeline .experience,
.text-light .timeline .experience .circle {
    border-color: rgba(255, 255, 255, 0.5);
}


/*-------------Timeline-----*/

.exper {
    padding: 4em 0em;
}

.timeline-label h4 {
    margin-top: 0;
    font-size: 1.9em;
    color: #55C1E5;
    padding: 1em 0em;
    font-weight: 600;
}

.timeline-label p {
    font-size: 1.09em;
    color: #696969;
    padding: 0.5em 0em;
    line-height: 1.7em;
}

.timeline-label {
    padding: 6em 0em;
}

.timeline .experience {
    position: relative;
    float: left;
    margin-left: 2em;
    padding-left: 4em;
    border-left: 2px solid #ccc;
}

.timeline .experience-info h5 {
    margin-top: 0;
    margin-bottom: 0.333em;
    font-size: 1.1em;
    color: #2C2C2C;
    font-weight: 600;
}

.timeline .experience-info .role {
    font-size: 0.9em;
    color: #323232;
}

.timeline .experience-info p {
    font-size: 0.9em;
    color: #A3A3A3;
    font-weight: 600;
    line-height: 1.7em;
}

.timeline time {
    display: block;
    width: 4.111em;
    color: #ccc;
    text-align: center;
    font-weight: 700;
}

.timeline .experience-img,
.timeline .experience-info,
.timeline .experience-info h5,
.timeline .experience-info .role,
.timeline .experience-info p {
    clear: none;
}

.timeline .experience .circle {
    position: absolute;
    top: 1em;
    left: -0.86em;
    display: block;
    width: 1.222em;
    height: 1.222em;
    border: 3px solid #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #F5F5F5;
}

.timeline .experience-img {
    float: left;
    width: 4em;
    height: 4em;
}

.timeline .experience-img img {
    -webkit-border-radius: 25%;
    -moz-border-radius: 25%;
    border-radius: 25%;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    width: 100%;
}

.timeline .experience-info {
    margin-left: 5.444em;
}


/*****/

.row-content2 {
    padding: 6% 8%;
}

.column.six,
.column.half,
.column.threesixths,
.column.twofourths {
    width: 40%;
}

.column {
    margin-left: 0;
    margin-right: 3.8%;
}

.column {
    clear: none;
    float: left;
    min-height: 1px;
}

.column.six,
.column.half,
.column.threesixths,
.column.twofourths {
    width: 48%;
}

.column.last,
.column.reset {
    margin-right: 0 !important;
}

.column {
    margin-left: 0;
    margin-right: 3.8%;
}

.experience-info p {
    margin-top: 0.67em;
    margin-bottom: 1.34em;
}

.brows_button_4 {
    margin: 3em 0em;
}


/*******/

.contact {
    background: #F6F6F6;
    padding: 6em 0em 2em 0em;
}

.left-form,
.right-form {
    float: left;
    margin: 22px 28px;
    width: 60%;
}

.contact form {
    padding-top: 2em;
}

.left-form li {
    display: block;
    color: #4D4949;
    border: 2px solid #CBD0D4;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    margin: 15px 0px;
    background: #fff;
}

.left-form li:hover {
    border: 2px solid #8DD4FF;
    color: #343434;
}

.left-form li:focus {
    border: 2px solid #8DD4FF;
}

.left-form li:active {
    border: 2px solid #8DD4FF;
}

.left-form input[type=text],
.left-form input[type=email],
.left-form textarea {
    float: right;
    font-family: 'Open Sans', sans-serif;
    width: 90%;
    padding: 1em 2em 1em 1em;
    border: none;
    color: #989898;
    font-size: 15px;
    float: left;
    outline: none;
    font-weight: 600;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
}

textarea {
    height: 150px;
    resize: none;
}

.right-form {
    float: right;
    width: 25%;
}

.icon {
    height: 28px;
    width: 28px;
    display: block;
    float: left;
    margin: 12px 0px 9px 9px;
}

.name input[type=text],
.email input[type=email] {
    width: 75%;
}

.user {
    background: url(../images/user.png) no-repeat 0px 0px;
}

.mail {
    background: url(../images/mail.png) no-repeat 0px 0px;
    margin: 16px 0px 9px 9px;
}

.name {
    float: left;
    width: 45%;
    margin-right: 4%;
}

.email {
    float: right;
    width: 45%;
}

.send {
    margin: 3em 0em;
    text-align: right;
}

.send a {
    color: #fff;
    background: #FC685C;
    padding: 1em 3em;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.send a:hover {
    background: #EB4334;
}

.right-form h4 {
    color: #CDCDCD;
    font-size: 1em;
    font-weight: 600;
}

.right-form p {
    color: #323232;
    font-size: 1em;
    line-height: 1.7em;
    padding: 1em 0em;
}


/* start soc_icons */

.soc_icons h2 {
    text-transform: uppercase;
    font-size: 1.2em;
    color: #c0c0c0;
    font-weight: 400;
    margin-bottom: 10px;
}

.soc_icons ul li {
    margin: 15px;
}

.soc_icons ul li a {
    opacity: 0.8;
    display: block;
    padding: 10px;
    background: #2e2e2e;
    width: 24px;
    height: 24px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-radius: 26px;
    color: #929191;
    font-weight: 600;
}

.soc_icons ul li a span {
    margin-left: 60px;
}

.soc_icons ul li a.icon1 {
    background: #39579D url('../images/icon1.png') no-repeat 18px 12px;
}

.soc_icons ul li a.icon2 {
    background: #02B3E9 url('../images/icon2.png') no-repeat 12px 13px;
}

.soc_icons ul li a.icon3 {
    background: #D95333 url('../images/icon3.png') no-repeat 14px 12px;
}

.soc_icons ul li a.icon4 {
    background: #007BB6 url('../images/icon4.png') no-repeat 14px 12px;
}

.soc_icons ul li a.icon5 {
    background: #FF0084 url('../images/icon5.png') no-repeat 12px 18px;
}

.soc_icons ul li a:hover {
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 1;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
    color: #373737;
}


/*******footer**********/

.footer {
    z-index: 10;
    background-color: #363842;
    color: #545766;
}

#top-footer .widget {
    margin-bottom: 0;
    font-size: 0.778em;
    width: 22.05%;
    float: left;
}

#top-footer {
    padding: 2em 0em;
    ;
}

.widget h4 {
    margin-top: 0;
    color: #CCC;
    font-size: 1.5em;
    font-weight: 600;
}

.plain li {
    margin: 10px 0px;
}

.footer a,
.footer p {
    color: #545766;
    text-decoration: none;
    font-size: 1.3em;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.footer p {
    padding: 1em 0em;
}

.footer a:hover {
    color: #fff;
}

.soc_icons1 li {
    float: left;
}

.copy {
    background-color: rgba(59, 63, 78, 0.48);
}

.copy p {
    color: #fff;
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    padding: 1.5em 0em;
}

.copy p a {
    color: #55C1E5;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.copy p a:hover {
    color: #fff;
}

#toTop {
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border: none;
    text-indent: 100%;
    background: url(../images/top.png) no-repeat right top;
}


/******response***********/

@media only screen and (max-width: 1440px) {
    .centertxt {
        width: 95%;
    }
    .name input[type=text],
    .email input[type=email] {
        width: 70%;
    }
}

@media only screen and (max-width: 1366px) {
    .da-slider {
        width: 100%;
        height: 300px;
    }
    .centertxt {
        width: 100%;
    }
}

@media only screen and (max-width: 1280px) {
    .wrap {
        width: 85%;
    }
    .group_3 {
        padding: 1em 0em 1em 0em;
    }
    .contact {
        padding: 4em 0em 2em 0em;
    }
    .group_2 {
        padding: 3em 0em 1em 0em;
    }
}

@media only screen and (max-width: 1024px) {
    .group_1_img .ui,
    .group_1_img .ux {
        font-size: 2.5em;
    }
    .chart canvas {
        width: 180px;
        height: 180px;
    }
    .chart {
        width: 180px;
        height: 180px;
    }
    .name input[type=text],
    .email input[type=email] {
        width: 60%;
    }
    .soc_icons1 ul li {
        margin: 8px;
    }
}

@media only screen and (max-width: 768px) {
    .wrap {
        width: 90%;
    }
    .centertxt>div:nth-child(4) {
        display: none;
    }
    .column.six {
        width: 100%;
        float: none;
        padding: 0em;
        margin: 0em;
        margin-bottom: 5em;
    }
    .timeline-label {
        text-align: center;
    }
    .timeline-label h4 {
        padding: 0.3em 0em;
    }
    .row-content2 {
        padding: 2%;
    }
    .brows_button_4 {
        margin: 2em 0em;
    }
    .exper {
        padding: 3em 0em;
    }
    .left-form,
    .right-form {
        float: none;
        margin: 22px 28px;
        width: 92%;
    }
    .right-form {
        float: none;
        width: 100%;
        margin: 0%;
    }
    .widget.meta-social.column.three.last {
        display: none;
    }
    #top-footer .widget {
        width: 29%;
    }
    .soc_icons ul {
        margin-top: 0.6em;
    }
    .soc_icons ul li {
        margin: 10px;
        width: 17%;
        float: left;
    }
    .soc_icons ul li a span {
        margin-left: 40px;
        font-size: 0.9em;
    }
    .soc_icons ul li a {
        width: 20px;
        height: 20px;
    }
    .soc_icons ul li a.icon1 {
        background: #39579D url('../images/icon1.png') no-repeat 16px 9px;
    }
    .soc_icons ul li a.icon2 {
        background: #02B3E9 url('../images/icon2.png') no-repeat 11px 12px;
    }
    .soc_icons ul li a.icon3 {
        background: #D95333 url('../images/icon3.png') no-repeat 13px 11px;
    }
    .soc_icons ul li a.icon4 {
        background: #b63a00 url('../images/icon4.png') no-repeat 12px 8px;
    }
    .soc_icons ul li a.icon5 {
        background: #FF0084 url('../images/icon5.png') no-repeat 11px 16px;
    }
    .contact {
        padding: 2em 0em;
    }
    ul.slimmenu li .sub-collapser:before {
        content: url(../images/down1.png);
    }
}

@media only screen and (max-width: 640px) {
    .group_2 {
        padding: 1em 0em 1em 0em;
    }
    .para {
        padding: 1em 0em 1em 0em;
        line-height: 1.9em;
    }
    .centertxt>div:nth-child(4) {
        display: inline-block;
    }
    .timeline-label h4 {
        font-size: 1.2em;
    }
    .exper {
        padding: 1.4em 0em;
    }
    .heading {
        font-size: 1.3em;
        padding-bottom: 3px;
    }
    .year1 {
        display: none;
    }
    .contact form {
        padding-top: 0em;
    }
    .contact {
        padding: 1.2em 0em 2em 0em;
    }
    .header {
        padding: 0em 0em 1em 0em;
    }
    .centertxt {
        width: 60%;
    }
    .chart {
        width: 200px;
        height: 200px;
    }
    .name,
    .email {
        float: none;
        width: 100%;
        margin-right: 0%;
    }
    .left-form input[type=text],
    .left-form input[type=email],
    .left-form textarea {
        padding: 0.5em 1em;
    }
    .mail {
        margin: 8px 0px 2px 9px;
    }
    .icon {
        margin: 4px 0px 0px 9px;
    }
    textarea {
        height: 120px;
        resize: none;
    }
    .send a {
        padding: 0.7em 2.2em;
    }
    .send {
        margin: 1.5em 0em;
        text-align: right;
    }
    .soc_icons ul li {
        margin: 0px;
        width: 16%;
        float: left;
    }
    .soc_icons ul li a span {
        margin-left: 32px;
        font-size: 0.9em;
    }
    .soc_icons ul li {
        width: 16%;
        margin-right: 20px;
    }
    .chart {
        width: 240px;
        height: 200px;
    }
}

@media only screen and (max-width: 480px) {
    .chart canvas {
        width: 160px;
        height: 160px;
    }
    .percent,
    .count-number,
    .count-number-done {
        color: #666;
        font-weight: 700;
        font-size: 1.5em;
        line-height: 1;
    }
    .timeline-label p,
    .group_1_text p,
    .para,
    .timeline .experience-info p,
    .right-form p {
        font-size: 0.9em;
    }
    .header {
        padding: 0.5em 0em;
    }
    .logo h1 a {
        font-size: 2.5em;
    }
    .soc_icons ul li {
        width: 26%;
        margin: 10px;
    }
    .copy p {
        color: #FFF;
        font-size: 0.9em;
    }
    #top-footer .widget {
        width: 100%;
        float: none;
        text-align: center;
    }
    .plain li {
        margin: 10px;
        float: left;
    }
    #top-footer>div:nth-child(2)>ul>li:nth-child(5)>a {
        display: none;
    }
    #top-footer {
        padding: 1em 0em;
    }
    .send a {
        padding: 0.4em 1.5em;
        font-size: 0.9em;
    }
    .send {
        text-align: center;
    }
    .right-form {
        text-align: center;
        margin-top: 2em;
    }
    .right-form p {
        padding: 0.5em 0em;
    }
    #contact>div>form>div.right-form>div {
        margin-top: 1em;
    }
    #top-footer>div:nth-child(2) {
        display: none;
    }
    #top-footer>div:nth-child(3) {
        display: none;
    }
}

@media only screen and (max-width: 320px) {
    .centertxt {
        width: 100%;
        text-align: center;
    }
    .chart {
        width: 160px;
        height: 180px;
        text-align: center;
        margin: 0 auto;
    }
    .timeline .experience-info {
        margin-left: 0;
        float: left;
        margin-top: 15px;
    }
    .left-form,
    .right-form {
        float: none;
        margin: 22px 10px;
        width: 92%;
    }
    .left-form input[type=text],
    .left-form input[type=email] {
        width: 60%;
        font-size: 0.8em;
    }
    .left-form textarea {
        width: 88%;
        font-size: 0.8em;
    }
    .soc_icons ul li {
        width: 40%;
    }
    .plain li {
        margin: 10px 20px;
    }
    .logo h1 a {
        font-size: 2.3em;
    }
    .timeline .experience-info h5 {
        font-size: 1em;
    }
    .column.six {
        margin-bottom: 2.5em;
    }
    .menu-collapser {
        height: 35px;
        line-height: 35px;
        font-size: 17px;
    }
    .right-form>div>ul>li:nth-child(5) {
        display: none;
    }
    .owl-buttons {
        display: none;
    }
    .chart canvas {
        width: 150px;
        height: 150px;
    }
    ul.slimmenu li a {
        padding: 8px 20px 8px 20px;
        font-size: 15px;
    }
    ul.slimmenu li .sub-collapser {
        top: 5px;
    }
}